<template>
  <div class="w-full h-full">
    <div
      id="mapchart2"
      class="w-full h-full map-container"
      ref="mapContainer2"
    ></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import { getStationsMapDataByUser } from "@/api/dataAnalysis";
import geoJson from "./chinageo.json";

const xData = ref([]);

const mapContainer2 = ref(null);
const symbolSize = (val) => {
  if (val < 10) {
    return 10;
  } else if (val ==0) {
    return 0;
  } else if (val > 10 && val<1000){
    return 30;
  }else{
    return 50;
  }
};
const drawMap = (data,Center,province) => {
  const chart = echarts.init(mapContainer2.value);
  chart.setOption({
    title: {
      text:province+ "用户人数分布",
      left: "center",
      textStyle: {
        color: "#fff",
      },
      subtext: province+"用户人数分布图",
      subtextStyle: {
        color: "#fff",
      },
      top: 30,
    },
    tooltip: {
      trigger: "none",
    },
    grid: {
      tooltip: {
        trigger: "item",
        show: true,
      },
    },
    series: [
      {
        type: "map",
        map: "china",
        name: "用户人数",
        scale: false,
        roam: false, // 允许缩放和平移
        zoom:7,
        center: Center,
        itemStyle: {
          normal: {
            areaColor: "#003861",
            borderColor: "#0081dd",
            color: "#fff",
          },
          emphasis: {
            areaColor: "#728ec3",
          },
        },

        emphasis: {
          show: false,

          label: {
            textStyle: {
              color: "#ffffff", // 将字体颜色设置为红色
            },
          },
        },
        markPoint: {
          symbolSize: 1, // 标记的大小
          symbol: "circle",
          tooltip: {
            trigger: "item",
          },
          itemStyle: {
            color: "#c6ac18",
          },
          data: data,
        },
      },
    ],
  });
};

onMounted(() => {
  echarts.registerMap("china", geoJson);
  GetMapCanvas();
});
const GetMapCanvas = async () => {
  const res = await getStationsMapDataByUser();
  if (res.code === 0) {
    var Mapdata = res.data.list;

    var Center = res.data.centre;
    var province = res.data.province;
    const NewMap = Mapdata.map((item) => ({
      ...item,
      itemStyle: {
        color: "yellow",
      },
      label: {
        show: false,
      },
      symbolSize: symbolSize(item.value),
    }));

    console.log(NewMap);

    drawMap(NewMap,Center,province);
  }
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
  /* 使容器占满整个视口高度 */
  overflow: hidden;
  /* 隐藏溢出部分 */
  /* background-color: #004981; */
}
</style>
